<script lang="ts" setup>
import { ref, watch } from "vue";
import OrderItem from "./components/order-item.vue";
import { ApiRes } from "@/types/data";
import request from "@/utils/request";
import { OrderListInfo } from "@/types/order";

// 订单状态
const orderStatus = [
  { name: "all", label: "全部订单" },
  { name: "unpay", label: "待付款" },
  { name: "deliver", label: "待发货" },
  { name: "receive", label: "待收货" },
  { name: "comment", label: "待评论" },
  { name: "complete", label: "已完成" },
  { name: "cancel", label: "已取消" },
];
const activeName = ref(orderStatus[0].name);
const orderState = ref(0);
const change = (obj: { tab: VNode; index: number }) => {
  orderState.value = obj.index;
};
const orderList = ref<OrderListInfo>({} as OrderListInfo);
watch(
  orderState,
  async (value) => {
    const res = await request.get<ApiRes<OrderListInfo>>("/member/order", {
      params: {
        orderState: value,
      },
    });
    console.log("hhh", res);

    orderList.value = res.data.result;
  },
  {
    immediate: true,
  }
);
</script>
<template>
  <div class="member-order">
    <XtxTabs v-model:model-value="activeName" @tab-click="change">
      <XtxTabsPane
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
        <div class="order-list">
          <OrderItem
            v-for="item in orderList.items"
            :key="item.id"
            :order="item"
          ></OrderItem>
        </div>
      </XtxTabsPane>
    </XtxTabs>
  </div>
</template>
<style lang="less" scoped>
.order-list {
  background-color: #fff;
  padding: 20px;
}
</style>
